昨天有人問我引用圖片的路徑問題，答案整理成一篇補充
雖說是圖片(image)、檔案(file)、樣式(css/scss/sass)、js等靜態資源，Nuxt 依其是否需要經 webpack 編譯 (webpacked)，分兩個資料夾放:

• assets: 放需要被編譯 (webpacked) 的檔案
• static: 不需額外處理的檔案，例如網站icon (favicon.ico)、設定檔 (robots.txt、sitemap.xml 、CNAME) 等等

檔案照規則放好，引用也有規則要遵守

路徑別名 和 引用方式

路徑別名對應表

記得寫 Vue.js SPA 時，若沒指定別名，import 常寫成多層的相對路徑

import Header from '../components/Header.vue';

或圖片路徑寫成

<img src="../../assets/my-image.png"/>

非常不推薦相對路徑寫法，讓專案維護頭痛、元件不容易重用

通常我們會在 webpack config 指定別名，Nuxt 已規定好別名規則，如下表

懶人包產生的 Nuxt 專案，srcDir = rootDir

因此，上述壞味道在 Nuxt 可改寫為

import Header from '~/components/Header.vue';

<img src="~/assets/my-image.png"/>

圖片引用

<!-- webpacked image from `assets` directory -->
<img src="~/assets/my-image-2.png"/>

<!-- Static image from `static` directory -->
<img src="~/static/my-image.png"/>

<!-- 在 vue file 以外的檔案(指 document 或 *.html)，可以更為簡化 -->
<img src="/my-image.png"/>

在設定檔引用檔案

同 05 設定全域樣式，載入 assets 下的樣式

css: [
  '@/assets/sass/all.sass'
],

樣式內引用

算是規則例外，小bug
Nuxt 2.0 無法正確解析 css 內的 ~/，因此建議你用 ~ 或 @/ 替代

background: url('~assets/my-bg-image.png');
background: url('@/assets/my-bg-image.png');

@import('~assets/css/reset.css');

Nuxt 如何編譯靜態資源？

放在 assets 資料夾下的檔案，引用前先經過 Webpack 編譯
更精確點講「透過 vue-loader 以及副檔名對應的 loader」編譯

• Vue File 經 vue-loader 拆出 <template>、<script>、<style>，交由對應 loader 進一步處理
• 樣式經過 css-loader
• 照片、其他檔案經過 file-loader、url-loader 處理

最終編成 Nuxt 對應格式，官方文件解說得很清楚，這不詳述囉